<template>
	<div class="site_info_container">
		<el-scrollbar>
			<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-position="top">
				<el-form-item label="系统LOGO">
					<h4>显示在登录页面和系统导航栏的网站图标（建议 .svg 格式）</h4>
					<sw-image-uploader v-model="formData.webLogo" size="100" accept="png" :disabled="!isHasAuth" />
				</el-form-item>
				<el-form-item label="系统图标">
					<h4>浏览器标签页显示的网站图标（建议 .ico 格式）</h4>
					<sw-image-uploader v-model="formData.field1" size="100" accept="ico" :disabled="!isHasAuth" />
				</el-form-item>
				<el-form-item label="系统名称" prop="name">
					<el-input v-model="formData.name" placeholder="请输入系统名称" maxlength="30" show-word-limit :disabled="!isHasAuth" />
					<h4>显示在浏览器标题栏和登录界面的系统名称</h4>
				</el-form-item>
				<el-form-item label="系统描述">
					<el-input type="textarea" v-model="formData.message" resize="none" placeholder="请输入内容" autosize :disabled="!isHasAuth" />
					<h4>用于 SEO 的网站元描述</h4>
				</el-form-item>
				<el-form-item label="版权声明">
					<el-input type="textarea" v-model="formData.field4" resize="none" placeholder="请输入内容" autosize :disabled="!isHasAuth" />
					<h4>显示在页面底部的版权声明文本</h4>
				</el-form-item>
				<el-form-item label="备案号">
					<el-input v-model="formData.field5" placeholder="请输入备案号" maxlength="30" show-word-limit :disabled="!isHasAuth" />
					<h4>工信部 ICP 备案编号（如：京ICP备12345678号）</h4>
				</el-form-item>
				<el-form-item label="公司地址">
					<el-input v-model="formData.field6" placeholder="请输入公司地址" maxlength="50" show-word-limit :disabled="!isHasAuth" />
				</el-form-item>
				<el-form-item label="电话号码">
					<sw-custom-input v-model="formData.field7" input-type="phone" placeholder="请输入电话号码" maxlength="12" :disabled="!isHasAuth" />
				</el-form-item>
				<el-form-item label="公司邮箱">
					<sw-custom-input v-model="formData.field8" input-type="email" placeholder="请输入公司邮箱" :disabled="!isHasAuth" />
				</el-form-item>
				<el-form-item label="系统退出时间">
					<div class="content">
						<el-input-number v-model="formData.quitTime" controls-position="right" :min="1" :disabled="!isHasAuth" />
						<span class="unit">分钟</span>
					</div>
					<h4>用户多长时间未操作登录超时</h4>
				</el-form-item>
			</el-form>
		</el-scrollbar>
		<div class="button" v-if="isHasAuth">
			<el-button v-bind="buttonConfig" :disabled="isUpdate" :loading="saveLoading" @click="handleSaveSiteInfo()">保存网站信息</el-button>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import authBtns from '@/mixins/authButtons';
import { addedSiteInfo, updateSiteInfo } from '@/api/system/tbSysSite';
export default {
	name: 'sitePage',
	data() {
		return {
			formData: {},
			formRules: {},
			saveLoading: false,
			buttonConfig: {
				size: 'medium',
				type: 'primary',
				icon: 'sw-icon-btn-save'
			}
		};
	},
	computed: {
		...mapGetters(['siteInfo', 'authButton']),
		originalData() {
			if (lodash.isEmpty(this.siteInfo)) {
				return {};
			} else {
				let quitTime = this.siteInfo.quitTime;
				let fields = ['id', 'webLogo', 'name', 'message', 'field4', 'field5', 'field6', 'field7', 'field8'];
				return { ...lodash.pick(this.siteInfo, fields), quitTime: parseInt(quitTime) };
			}
		},
		isUpdate() {
			return lodash.isEqual(this.originalData, this.formData);
		},
		addOrEdit() {
			return !this.originalData.id ? true : false;
		},
		isHasAuth() {
			let btns = authBtns[this.$options.name] || [];
			let intersection = lodash.intersectionBy(this.authButton, btns, 'id');
			return intersection.length > 0;
		}
	},
	mounted() {
		this.formData = lodash.cloneDeep(this.originalData);
	},
	methods: {
		async handleSaveSiteInfo() {
			let callFunction = this.addOrEdit ? addedSiteInfo : updateSiteInfo;
			let result = await callFunction(this.formData).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('保存网站信息成功');
				this.$store.dispatch('getSiteBaseInfo');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.site_info_container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	.el-scrollbar {
		flex: 1;
		overflow: hidden;
	}
	&:deep(.el-scrollbar__view) {
		padding: 24px 24px 0;
	}
	&:deep(.el-form-item) {
		width: 50%;
		min-width: 500px;
	}
	&:deep(.el-form-item__label) {
		color: #303133;
		line-height: 1;
		font-size: 15px;
		font-weight: bold;
	}
	&:deep(.el-form-item__content) {
		line-height: 1;
		h4 {
			font-weight: normal;
			color: #909399;
			margin: 5px 0;
		}
		.content {
			display: flex;
			align-items: center;
		}
		span.unit {
			color: #606266;
			margin-left: 10px;
		}
	}
	&:deep(.el-textarea__inner) {
		padding: 7px 16px 6px;
	}
	.button {
		padding: 16px;
		border-top: solid 1px #e4e7ed;
	}
}
</style>
